<template>
<div class="">
<criteria partial='criteria' @show-con = "pocon" v-ref:cri>
<div class= "form-horizontal" partial>
  <div class="col-sm-11 "  style="margin-top:10px;">
    <label  class="col-sm-2 control-label">气表品牌:</label>
    <div class="col-sm-2">
      <v-select id="f_meter_brand"
      v-model="model.f_meter_brand"
      placeholder='请选择'
      condition="t.f_meter_brand ='{}'"
      :value.sync="model.f_meter_brand"
      :options='$parent.meterBrand'
      close-on-select clear-button>
      </v-select>
    </div>
    <label  class="col-sm-2 control-label">气表型号:</label>
    <div class="col-sm-2">
      <v-select id="f_meter_style"
      v-model="model.f_meter_style" multiple
      placeholder='请选择'
      condition="t.f_meter_style ='{}'"
      :value.sync="model.f_meter_style"
      :options='$parent.meterStyle'
      close-on-select clear-button>
      </v-select>
    </div>
    <label for="f_whether_pay" class="col-sm-2  control-label">是否缴费:</label>
    <div class="col-sm-2" >
      <v-select id="f_whether_pay"
      v-model="model.f_whether_pay"
      placeholder='请选择'
      condition="t.f_whether_pay ='{}'"
      :value.sync="model.f_whether_pay"
      :options='$parent.whetherPay'
      close-on-select clear-button>
      </v-select>
    </div>
  </div>
  <div class="col-sm-11"  style="margin-top:10px;">
    <label for="f_tablebase" class="col-sm-2 control-label">本次抄表底数:</label>
    <div class="col-sm-6">
     <v-input :value.sync="$parent.f_tablebase" :expression.sync = 'model.f_tablebase' condition="t.f_tablebase {}" v-model="model.f_tablebase" v-ref:tablebase><v-input>
    </div>
    <label for="f_meter_state" class="col-sm-2 control-label">抄表单状态:</label>
    <div class="col-sm-2">
      <v-select id="f_meter_state"
      v-model="model.f_meter_state"
      placeholder='请选择'
      condition="t.f_meter_state ='{}'"
      :value.sync="model.f_meter_state"
      :options='$parent.meterState'
      close-on-select clear-button>
      </v-select>
    </div>
  </div>
  <div class="col-sm-11 "  style="margin-top:10px;">
    <label for="f_last_tablebase" class="col-sm-2 control-label">上次抄表底数:</label>
    <div class="col-sm-6">
     <v-input :value.sync="$parent.f_last_tablebase" :expression.sync = 'model.f_last_tablebase' condition="t.f_last_tablebase {}" v-model="model.f_last_tablebase" v-ref:lasttablebase><v-input>
    </div>
    <!-- <label for="f_operator" class="col-sm-2 control-label">操作人:</label>
    <div class="col-sm-2">
     <input type="text" class="form-control" v-model="model.f_operator" condition="t.f_operator ='{}'"  placeholder="操作人"/>
    </div> -->
  </div>

</div>
</criteria>
</div>
</template>
<script>
import AppData from '../../../../../stores/AppData'
export default {
  data () {
    return {
      arr: [],
      condition: '',
      f_tablebase: '',
      f_last_tablebase: ''
    }
  },
  methods: {
    reset () {
      this.$refs.cri.model.f_meter_state = ''
      this.$refs.cri.model.f_whether_pay = ''
      this.$refs.cri.model.f_meter_brand = ''
      this.$refs.cri.model.f_meter_style = ''
      this.$refs.cri.model.f_operator = ''

      this.$refs.cri.$refs.tablebase.data = ''
      this.$refs.cri.$refs.tablebase.symbol = ''
      this.$refs.cri.$refs.lasttablebase.data = ''
      this.$refs.cri.$refs.lasttablebase.symbol = ''
    },
    pocon () {
      let model = this.$refs.cri.model
      this.arr = []
      this.addSelectElement(model.f_meter_brand, '气表品牌', 'f_meter_brand')
      this.addSelectElement(model.f_meter_style, '气表型号', 'f_meter_style')
      this.addSelectElement(model.f_whether_pay, '是否缴费', 'f_whether_pay')
      this.addVinputElement(this.f_tablebase, model.f_tablebase, '本次抄表底数', 'f_tablebase')
      this.addSelectElement(model.f_meter_state, '抄表单状态', 'f_meter_state')
      this.addVinputElement(this.f_last_tablebase, model.f_last_tablebase, '上次抄表底数', 'f_last_tablebase')
      this.addElement(model.f_operator, '操作人', 'f_operator')

      this.$dispatch('showcond', this.arr)
    },
    addElement (value, chineseColumn, englishColumn) {
      if (value && value !== '') {
        this.arr.push({content: `${chineseColumn}:${value}`, culmn: englishColumn})
      }
    },
    addSelectElement (value, chineseColumn, englishColumn) {
      if (value && value.length > 0 && value[0] !== '') {
        this.arr.push({content: `${chineseColumn}:${value}`, culmn: englishColumn})
      }
    },
    addVinputElement (value, value2, chineseColumn, englishColumn) {
      if (value && value2 !== '') {
        this.arr.push({content: `${chineseColumn}:${value[0][0]} ${value[1]}`, culmn: englishColumn})
      }
    },
    sort () {
      for (let key in this.$refs.cri.model) {
        let num = 0
        for (let index in this.arr) {
          if (this.arr[index].culmn !== key) {
            num++
          }
        }
        if (num === (this.arr.length)) {
          this.$refs.cri.model[key] = ''
          if (key === 'f_tablebase') {
            this.$refs.cri.$refs.tablebase.data = ''
            this.$refs.cri.$refs.tablebase.symbol = ''
          }
          if (key === 'f_last_tablebase') {
            this.$refs.cri.$refs.lasttablebase.data = ''
            this.$refs.cri.$refs.lasttablebase.symbol = ''
          }
        }
      }
    }
  },
  watch: {
    'arr': {
      deep: true,
      handler (val) {
        this.sort()
        this.$refs.cri.search()
      }
    }
  },
  computed: {
    meterState () {
      return [{label: '全部', value: ''}, ...AppData.getParam('抄表状态')]
    },
    whetherPay () {
      return [{label: '全部', value: ''}, ...AppData.getParam('是否')]
    },
    meterBrand () {
      return [{label: '全部', value: ''}, ...AppData.getParam('气表品牌')]
    },
    meterStyle () {
      return [{label: '全部', value: ''}, ...AppData.getParam('气表型号')]
    }
  }
}
</script>
